<template>
  <div class="banner_col">
    <div class="warn-box">
      <svg-icon
        style="margin-right:17px"
        icon-class="warn"
        :size="20"
      />
      <p><span>图片要求！</span><br />轮播图图片宽度335px，高度500px</p>
    </div>
    <el-row :gutter="20">
      <el-col
        v-for="(item, index) in carousel"
        :span="12"
        :key="index"
      >
        <banner-form
          type="bannerCol"
          :item-index="index"
          :form-data="item"
          :show-tool="true"
          @upSortItem="upSortItem(index)"
          @downSortItem="downSortItem(index)"
          @deleteItem="deleteItem(index)"
        ></banner-form>
      </el-col>
    </el-row>
    <div
      v-if="carousel.length < 5"
      class="add-div"
      @click="addBanner"
    >
      <i class="el-icon-plus"></i>添加图片({{carousel.length}}/5)
    </div>
    <div class="warn-box">
      <svg-icon
        style="margin-right:17px"
        icon-class="warn"
        :size="20"
      />
      <p><span>图片要求！</span><br />图片背景宽度335px，高度240px</p>
    </div>
    <col-form
      ref="colForm1"
      title="二栏式1"
      type="bannerCol"
      content-type="img"
      :form-data="configData[0]"
    ></col-form>
    <col-form
      ref="colForm2"
      title="二栏式2"
      type="bannerCol"
      content-type="img"
      :form-data="configData[1]"
    ></col-form>
  </div>
</template>

<script>
import bannerForm from "../components/bannerForm";
import colForm from "../components/colForm";
export default {
  components: { bannerForm, colForm },
  data() {
    return {
      carousel: [],
      configData: [
        {
          backgroundImg: '',
          title: '',
          subtitle: '',
          jumpUrl: ''
        },
        {
          backgroundImg: '',
          title: '',
          subtitle: '',
          jumpUrl: ''
        }
      ]
    }
  },
  methods: {
    // 升序
    upSortItem(index) {
      if (index === 0) {
        return;
      }
      let item = this.carousel[index];
      this.$set(this.carousel, index, this.carousel[index - 1]);
      this.$set(this.carousel, index - 1, item);
    },
    // 降序
    downSortItem(index) {
      if (index === this.carousel.length - 1) {
        return;
      }
      let item = this.carousel[index];
      this.$set(this.carousel, index, this.carousel[index + 1]);
      this.$set(this.carousel, index + 1, item);
    },
    // 删除推荐位
    deleteItem(index) {
      this.carousel.splice(index, 1);
    },
    addBanner() {
      this.carousel.push({
        img: '',
        jumpType: '',
        jumpUrl: '',
        goods: {}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.link_val {
  margin-bottom: 15px;
}
</style>
